<!-- <style>
  @media (min-width: 992px) {
  .modal-lg .modal-xl {
    max-width: 1024px;
  }
</style> -->
<!--页面主要内容-->
<main class="lyear-layout-content">

  <div class="container-fluid p-t-15">

    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">订单管理</a>
            <a><cite>订单列表</cite></a>
          </span>
          <div class="card-toolbar d-flex flex-column flex-md-row">
            <div class="toolbar-btn-action">
              <!-- <a class="btn btn-danger delAll"><i class="mdi mdi-window-close"></i> 批量删除</a> -->
            </div>

            <form class="layui-form" id="layui-form" method="get" role="form" style="display: flex;">
              <input type="hidden" name="action" value="search">
              <select name="search" lay-verify="">
                <option value="code">订单号</option>
                <option value="nickname">用户名</option>
              </select>
              <input type="text" name="title" placeholder="请选择搜索条件" autocomplete="off" class="layui-input">
              <button class="layui-btn layui-btn-primary" type="submit">搜索</button>
            </form>
          </div>
          <div class="card-body">

            <div class="table-responsive">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <th>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="check-all">
                        <label class="custom-control-label" for="check-all"></label>
                      </div>
                    </th>
                    <th>编号</th>
                    <th>订单号</th>
                    <th>用户名称</th>
                    <th>配送地址</th>
                    <th>配送单号</th>
                    <th>物流公司</th>
                    <th>订单总价</th>
                    <th>创建时间</th>
                    <th>订单状态</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  {foreach $OrderList as $key => $item}
                  <tr>
                    <td>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input ids" name="ids[]" value="{$item.id}"
                          id="ids-{$item.id}">
                        <label class="custom-control-label" for="ids-{$item.id}"></label>
                      </div>
                    </td>
                    <td>{$key+1}</td>
                    <td>{$item.code}</td>
                    <td>{$item.user.nickname}</td>
                    <td>
                      {$item.address.provinces.name}{$item.address.citys.name}{$item.address.districts.name}{$item.address.address}
                    </td>
                    <td>{$item.expcode}</td>
                    <td>{$item.express.name}</td>
                    <td>{$item.total}</td>
                    <td>{$item.createtime}</td>
                    <td>
                      {if condition="$item.status == '1'"}
                      <font class="text-success">已支付</font>
                      {elseif condition="$item.status == '2'"}
                      <font class="text-info">已发货</font>
                      {elseif condition="$item.status == '3'"}
                      <font class="text-pink">未评价</font>
                      {elseif condition="$item.status == '4'"}
                      <font class="text-brown">已评价</font>
                      {elseif condition="$item.status == '-2'"}
                      <font class="text-cyan">申请退货</font>
                      {elseif condition="$item.status == '-1'"}
                      <font class="text-muted">已退货</font>
                      {/if}
                    </td>
                    <td>
                      {if condition="$item.status == '1'"}
                      <div class="btn-group">
                        <button class="btn btn-xs btn-default edit" data-toggle="modal" data-target="#editCateModel"
                          data-id="{$item.id}"><i class="mdi mdi-tanker-truck" data-toggle="tooltip"
                            data-original-title="发货"></i></button>

                        <button class="btn btn-xs btn-default info" data-toggle="modal" data-target="#infoCateModel"
                          data-id="{$item.id}"><i class="mdi mdi-clipboard-text-outline" data-toggle="tooltip"
                            data-original-title="订单详情"></i></button>

                      </div>
                      {else}
                      <div class="btn-group">
                        <button class="btn btn-xs btn-default info" data-toggle="modal" data-target="#infoCateModel"
                          data-id="{$item.id}"><i class="mdi mdi-clipboard-text-outline" data-toggle="tooltip"
                            data-original-title="订单详情"></i></button>
                      </div>
                      {/if}
                    </td>
                  </tr>
                  {/foreach}
                </tbody>
              </table>
            </div>
            <!-- 分页 -->
            {$OrderList->render()}
          </div>
        </div>
      </div>
    </div>

  </div>

</main>
<!--End 页面主要内容-->

<!-- 发货模态框 -->
<div class="modal fade" id="editCateModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="exampleModalLabel">发货</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" type="button">选择物流</button>
          </div>
          <select name="deliver" id="deliver" class="form-control">
            <option value="0">请选择</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary SaveEdit" data-id="">保存</button>
      </div>
    </div>
  </div>
</div>

<!-- 订单详情模态框 -->
<div class="modal fade" id="infoCateModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered  modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="exampleModalLabel">订单详情</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">收货人</span>
                </div>
                <input type="text" class="form-control" name="nickname" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default" value="">
              </div>
            </div>
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">订单状态</span>
                </div>
                <input type="text" class="form-control" name="orderstatus" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">收货地址</span>
                </div>
                <input type="text" class="form-control" name="address" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">订单总价</span></span>
                </div>
                <input type="text" class="form-control" name="total" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">手机号码</span>
                </div>
                <input type="text" class="form-control" name="mobile" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">商品单价</span>
                </div>
                <input type="text" class="form-control" name="price" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">订单号</span>
                </div>
                <input type="text" class="form-control" name="code" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">下单数量</span>
                </div>
                <input type="text" class="form-control" name="num" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">配送单号</span>
                </div>
                <input type="text" class="form-control" name="expcode" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">配送公司</span>
                </div>
                <input type="text" class="form-control" name="express" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">订单描述</span>
                </div>
                <input type="text" class="form-control" name="content" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
            <div class="col">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">下单时间</span>
                </div>
                <input type="text" class="form-control" name="time" aria-label="Default" disabled
                  aria-describedby="inputGroup-sizing-default">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary SaveEdit" data-id="">保存</button>
      </div>
    </div>
  </div>
</div>

<script>

  layui.use(['layer'], function () {
    var $ = layui.jquery,
      layer = layui.layer

    // 选择发货
    $('.edit').click(function () {
      let id = $(this).data('id');
      // console.log(id);
      $.ajax({
        type: 'post',
        url: `{:url('admin/order/deliver')}`,
        data: {
          orderid: id,
          action: 'deliver'
        },
        dataType: 'json',
        success: function (res) {
          if (res.code == 0) {
            layer.msg(res.msg, { icon: 2, time: 1500 }, function (index) {
              layer.close(index)
              location.reload()
            })
          } else if (res.code == 1) {
            console.log(res)
            let data = res.data
            let option = '<option value = "0"> 请选择 </option>'
            data.forEach(item => {
              option += `<option value = '${item.id}'> ${item.name} </option>`
            });
            $('#deliver').html(option)
            $('.SaveEdit').attr('id', id);
          }
        }
      })
    })

    // 确定发货
    $('.SaveEdit').click(function () {
      // 物流公司id
      let id = $('#deliver')[0].value
      let orderid = $(this).attr('id')
      if (id == 0) {
        layer.msg('请选择物流公司', { icon: 2, time: 1500 }, function (index) {
          layer.close(index)
        })
        return
      }
      $.ajax({
        type: 'post',
        url: `{:url('admin/order/deliver')}`,
        data: {
          id,
          orderid,
          action: 'ok'
        },
        dataType: 'json',
        success: function (res) {
          if (res.code == 0) {
            layer.msg(res.msg, { icon: 2, time: 1500 }, function (index) {
              layer.close(index)
            })
          } else if (res.code == 1) {
            layer.msg(res.msg, { icon: 1, time: 1500 }, function (index) {
              layer.close(index)
              $('#addCateModel').modal('hide')
              // location.href = res.url              
              location.reload()

            })
          }
        }
      })

    })

    // 订单详情
    $('.info').click(function () {
      let id = $(this).data('id')
      $.ajax({
        type: 'post',
        url: `{:url('admin/order/info')}`,
        data: {
          id,
          action: 'info'
        },
        dataType: 'json',
        success: function (res) {
          if (res.code == 0) {
            layer.msg(res.msg, { icon: 2, time: 1500 }, function (index) {
              layer.close(index)
            })
            return false
          } else {
            console.log(res.data)
            let data = res.data
            $('input[name = "nickname"]').val(data.user.nickname)
            $('input[name = "orderstatus"]').val(data.status_text)
            $('input[name = "address"]').val(data.address.region_text + '-' + data.address.address)
            $('input[name = "total"]').val(data.total)
            $('input[name = "mobile"]').val(data.address.mobile)
            $('input[name = "price"]').val(proArr(data.proArr))
            $('input[name = "code"]').val(data.code)
            $('input[name = "num"]').val(numArr(data.numArr))
            if (data.expcode == null) {
              $('input[name = "expcode"]').val('请先发货')
            } else {
              $('input[name = "expcode"]').val(data.expcode)
            }

            $('input[name = "express"]').val(data.express.name)
            if (data.content == '') {
              $('input[name = "content"]').val('暂无')
            } else {
              $('input[name = "content"]').val(data.content)
            }
            $('input[name = "time"]').val(data.createtime)

          }
          return false
        }
      })
    })

    function proArr (arr) {
      let text = ''
      arr.forEach(item => {
        for (let obj in item) {
          text += obj + ': ' + item[obj] + '\t'
        }
      });
      return text
    }
    function numArr (arr) {
      let text = ''
      arr.forEach(item => {
        text += item.name + '×' + item.num + '\t'

      });
      return text
    }

  })

</script>